<template>
	<view class="warp">
    <fu-custom bgColor="bg-white text-333" :isBack="true">
    </fu-custom>
	  <!-- background pic start -->
	  <view class="bg" :style="{height:'calc(400rpx + ' + StatusBar + 'px)'}">
	    <view class="logo-contnt flex align-center justify-center flex-direction">
	      <view class="logo width-180 height-180"></view>
	      <!-- <view>欢迎来到fust-UI</view> -->
	    </view>
	  </view>
	  <!-- background pic end -->
	
	  <!-- 密码login start -->
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" src="../../static/phone1.png" mode="widthFix"></image>
	    <input type="number" focus v-model="phone" maxlength="11" placeholder-class="fu-fs32 text-bf"
	      :placeholder="i18n['请输入手机号']" name="input" />
	  </view>
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" src="../../static/yzm.png" mode="widthFix"></image>
	    <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf"
	        type="number" v-model="vercode" :placeholder="i18n['请输入验证码']" minlength="4"/>
	      <view class="text-theme" @click="handleSendVerCode">
	        {{ beginning ? time + i18n['s后重新获取'] : i18n['获取验证码'] }}
	      </view>
	    </view>
	  </view>
	  <view class="flex align-center solid-bottom margin-lr padding-tb">
	    <image class="width-34 margin-right" src="../../static/pwd.png" mode="widthFix"></image>
	    <view class="flex align-center justify-between flex-sub" style="min-width: 1px;">
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'password'"
	        type="password" v-model="password" placeholder="请输入密码(4-8位字母或数字)" maxlength="8" />
	      <input class="flex-sub" style="min-width: 1px;" placeholder-class="fu-fs32 text-bf" v-if="type == 'text'"
	        type="text" v-model="password" placeholder="请输入密码(4-8位字母或数字)" maxlength="8" />
	      <image class="width-34" src="../../static/open.png" :data-type="type" @click.stop="is_kejian"
	        v-if="type == 'text'" mode="widthFix"></image>
	      <image class="width-34" src="../../static/close.png" :data-type="type" @click.stop="is_kejian"
	        v-if="type == 'password'" mode="widthFix"></image>
	    </view>
	  </view>
	  <!-- 密码login end -->
	  <!-- 立即登录按钮 start -->
	  <button type="success" class="text-white margin-lr-lg margin-top-120 radius-100 bg-theme fu-fs32"
	    shape="circle" @click="reg">
	    {{i18n['确定']}}
	  </button>
	  <!-- 断网监测 start -->
	  <fu-notwork></fu-notwork>
	  <!-- 断网监测 end -->
	
	</view>
</template>

<script>
	// 表单验证插件
	import {
		validate
	} from '@/common/utils/index.js'
	import fuAreaCode from '../../components/fu-area-code/fu-area-code.vue';
	export default {
		components: {
			fuAreaCode
		},
		data() {
			return {
				phone: '', //手机号
				vercode: '', //验证码
				password: '', //密码
				prefix: '86', //区号
				time: 60, //倒计时60S
				beginning: false, //显示倒计时
				isLoading: false,
				type: 'password', //密码类型
			};
		},
		onLoad() {
		},
		methods: {
			//密码是否可见
			is_kejian(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 'password') {
					this.type = 'text';
				} else {
					this.type = 'password';
				}
			},
			/**
			 * @event 点击获取验证码
			 * @description 获取验证码
			 * @property {String} is_test - 是否是测试环境
			 * @property {String} phone - 手机号
			 * @property {String} type - 请求类型 1=注册(未注册手机号),2=忘记密码(已经注册的手机号),3=短信登录,4修改手几号
			 */
			// 发送验证码
			handleSendVerCode() {
        // 如果按钮状态是加载中，直接return，防止用户多次点击
        if (this.isLoading) return;
        if (this.beginning) return false;
        
				let {
					phone
				} = this;
				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				if (!validate(phone, 'phone')) return this.$message.info(this.i18n['请输入正确的手机号']);
        // 上述验证都通过，将按钮的点击状态改为true
        this.isLoading = true;
				this.$api
					.post(global.apiUrls.GetVerifyCode, {
						is_test: global.IS_DEV,
						mobile: phone,
						prefix:this.prefix,
						type: '2',
						user_type:'3',	//0普通用户 1代理 2业务员 3商家 4分理处 5扫码收货 6核验装车 7司机 8入仓条码打印
					})
					.then(res => {
						if (res.data.code == 1) {
              this.beginning = true;
							clearInterval(this.timer);
							//开始倒计时
							this.timer = setInterval(() => {
								if (this.time == 1) {
									//倒计时结束
									clearInterval(this.timer);
									this.time = 60;
									this.beginning = false;
									return;
								}
								this.time--;
							}, 1000);
							if (res.data.data.code) {
							  this.$message.info(this.i18n['验证码为'] + res.data.data.code );
							  this.vercode = res.data.data.code;
							}
              // 把按钮的状态改为false
              this.isLoading = false;
						} else {
              this.beginning = false;
              // 把按钮的状态改为false
              this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					}).catch(function(err) {
            // 把按钮的状态改为false
            this.isLoading = false;
          });;
			},

			/**
			 * @description 登录
			 */
			reg() {
				// 登录加载动画未完成不往下执行
				if (this.isLoading) return
				// 从data取值 phone手机号 vercode验证码 password密码
				let {
					phone,
					vercode,
					password
				} = this;
				// 手机号不存在
				if (!phone) return this.$message.info(this.i18n['请输入手机号']);
				// 输入手机号错误
				if (!validate(phone, 'phone')) return this.$message.info('请输入正确的手机号');
				// 验证码不存在
				if (!vercode) return this.$message.info(this.i18n['请输入验证码']);
				// 验证码错误
				if (!validate(password, 'password')) return this.$message.info('请输入字母或数字4-8位密码');
				// 加载动画完成
				this.isLoading = true;
				// 调用重置密码接口
				this.$api
					.post(global.apiUrls.postForgetPassword, {
						password: password,
						mobile: phone,
						code: vercode,
						type:2,
						user_type:'3',	//0普通用户 1代理 2业务员 3商家 4分理处 5扫码收货 6核验装车 7司机 8入仓条码打印
					})
					.then(res => {
						// 重置密码成功跳转密码登录页面进行登录
						if (res.data.code == 1 && res.data.data) {
							// 重置密码成功提示
							this.$message.info(res.data.msg);
							setTimeout(() => {
                this.isLoading = false;
								uni.navigateBack();
							}, 500);
						} else {
              this.isLoading = false;
							// 重置密码失败提示
							this.$message.info(res.data.msg);
						}
					});
			},

		}
	};
</script>
<style lang="scss">
	// 主体 start
	.warp {
	  background: #fff;
	  min-height: 100vh;
	  overflow: hidden;
	
	  // background pic start
	  .bg {
	    width: 100%;
	    position: relative;
	    .logo-contnt {
	      position: absolute;
	      top: 0;
	      left: 0;
	      width: 100%;
	      height: 100%;
	      .logo {
	        background-image: url('/static/logo.png');
	        background-repeat: no-repeat;
	        background-size: contain;
	        border-radius: 40rpx;
	        overflow: hidden;
	      }
	    }
	  }
	  // background pic end
	  // 验证码login end
	}
	// 主体 end
	.footer{
	  position: fixed;
	  bottom: 116rpx;
	  bottom: calc(116rpx + constant(safe-area-inset-bottom));
	  bottom: calc(116rpx + env(safe-area-inset-bottom));
	  width: 100%;
	}
</style>
